
<!DOCTYPE html>
<html lang="es" >
<head>

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-resource.js"></script>
<script src="js/angular-route.js"></script>
<script src="script.js"></script>
<script src="js/controller.js"></script>
<script src="js/services.js"></script>


</head>
<jsp:forward page="login.htm"></jsp:forward>
<body ng-app="ngAppDemo" >

	 <div ng-controller="CartController"  class="container" >
	 <form>
	 	<h1>Add Your Order</h1>
	  Title  :   <input type="text"  ng-model="textTitle" class="form-control" placeHolder="Title..." required > 
	  <br/>
	  Quantity : <input type="text"  ng-model="textQuantity" class="form-control" placeHolder="Quantity..." required >
	  <br/>
	  Price  :   <input type="text"  ng-model="textPrice" class="form-control" placeHolder="Price..." required>
	  <br/>
	  <button ng-click="add()" class="btn btn-primary" >
	  	<span class="glyphicon glyphicon-plus"></span>  Add
	  </button>
	  </form>
	  <br/>
	  <br/>
	 	<h1>Order  List</h1>
	 	<table class="table table-bordered">
             <thead>
					<tr>
						<th>Title</th>
						<th>quantity</th>
						<th>Price</th>
						<th>Total</th>
						<th>Actions</th>
						<th> . . . </th>
					</tr>
             </thead>
             <tbody>
                   <tr ng-repeat="item in items">
                   	  <td> {{item.title}} </td>
                   	  <td> {{item.quantity}}</td>
				      <td> {{item.price | currency}}</td>
        			  <td> {{item.price * item.quantity | currency}}</td>
				      <td><button ng-click="remove($index)"  class = "btn btn-danger" >
				      	<span class="glyphicon glyphicon-trash"></span> Remove
				      	</button></td>
				      <td></td>
                   </tr>
             </tbody>
	 	</table>
    <strong>Items:</strong> {{items.length}}
    <strong>Total:</strong> {{ showTotal() | currency}}
	 </div>
	 <br/>
     <div  id="templatediv"  ng-controller="templateList" class="container"  >
	 	<table>
             <thead>
					<tr>
						<th>Nombre del Documento</th>
						<th>document</th>
						<th>Parent</th>
						<th>emcrypted</th>
						<th>Actions</th>
						<th> . . . </th>
					</tr>
             </thead>
             <tbody>
                   <tr ng-repeat="template in templates">
                   	  <td> {{template.idString}} </td>
                   	  <td> {{template.idDocument}} </td>
				      <td> {{template.idParent}}</td>
        			  <td>{{template.encrypted}}</td>
				      <td><button id="btn btna" ng-click="remove($index)" class="btn btn-danger" >Remove</button></td>
				      <td></td>
                   </tr>
             </tbody>
	 	</table>
     </div>


<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>